<template>
	<view class="bg-white min-height-100 ">
		<view class="padding" v-if="info">
			<view class="my-row">
				<view class="row-label">头像</view>
				<view class="row-content">
					<u--image :width="100" :height="100" shape="circle" :src="`${fileUrl}${info.url}`" @click="chooseImage(formConfig.avatar)"></u--image>
				</view>
			</view>
			<view class="my-row">
				<view class="row-label">名字</view>
				<view class="row-content" @tap="update(formConfig.nickName)">{{info.nickName || "--"}}</view>
			</view>
			<view class="my-row">
				<view class="row-label">身份证号</view>
				<view class="row-content" @tap="update(formConfig.userNumberId)">{{info.userNumberId || "--"}}</view>
			</view>
			<view class="my-row">
				<view class="row-label">性别</view>
				<view class="row-content" @tap="update(formConfig.sex)">{{SexEnum[Number(info.sex)]}}</view>
			</view>
			<view class="my-row">
				<view class="row-label">手机号</view>
				<view class="row-content" @tap="update(formConfig.phonenumber)">{{info.phonenumber || "--"}}</view>
			</view>
			<view class="my-row">
				<view class="row-label">密码</view>
				<view class="row-content" @tap="changePassword">******</view>
			</view>
			<view class="my-row">
				<view class="row-label">消息</view>
				<view class="row-content" @tap="toMessage">消息提醒</view>
			</view>
			<!-- <view class="my-row">
				<view class="row-label">上报</view>
				<view class="row-content" @tap="toReport">去上报(临时入口)</view>
			</view> -->
		</view>

		<view class="btn">
			<view class="logout-btn common-btn login-btn margin-top-lg" @tap="logout">退出</view>
		</view>

		<u-modal :show="modalConfig.show" :title="modalConfig.title" showConfirmButton showCancelButton @confirm="confirm" @cancel="cancel">
			<view class="width-p-100">
				<block v-if="modalConfig.domType===domType.input">
					<u--input v-model="modalConfig.val"></u--input>
				</block>
				<block v-else-if="modalConfig.domType===domType.radio">
					<u-radio-group v-model="modalConfig.val" placement="row">
						<u-radio v-for="(item,index) of modalConfig.source" :key="index" :name="item.value.toString()" :iconSize="30" :size="30" :labelSize="30" :label="item.label" :value="item.value"
							:customStyle="{marginRight: '20rpx'}">
						</u-radio>
					</u-radio-group>
				</block>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	import {
		SexEnum
	} from "@/enums/common"
	import {
		getUserInfo,
		editUserInfo
	} from "@/api/Interface/user"
	import {
		useSendCode
	} from "@/pages/login/hooks/useModule"
	import {
		VerCodeTypeEnum
	} from "@/enums/verCode"
	import formConfig, {
		domType
	} from "./config"
	import {
		useLogout
	} from "../../hooks/useLogin"
	import {
		useGetUserInfo
	} from "../../hooks/useUser"
	import {
		useUploadImage
	} from "../../hooks/useUpload"
    import JSEncryptUtils from '@/utils/JSEncrypt.js';
	export default {
		components: {},
		data() {
			return {
				SexEnum,
				formConfig,
				fileUrl: this.$basic_config.fileUrl,
				domType,
				modalConfig: {
					show: false,
					title: "",
					domType: domType.input,
					val: null,
					valText: null,
					formConfig: null,
					source: []
				}
			}
		},
		computed: {
			...mapState("user", {
				info: state => state.userInfo
			})
		},
		onReady() {

		},
		methods: {
			toReport() {
				uni.navigateTo({
					url: "/pages/event/report/report"
				})
			},
			chooseImage(config) {
				if (!this.info) return;
				useUploadImage(this.$basic_config.uploadUrl, {
					bs: "1"
				}).then(uploadRes => {
					if (uploadRes.code === 200) {
						editUserInfo({
							userId: this.info.userId,
							[config.attr]: uploadRes.data[0]?.file_id
						}).then(res => {
							if (res.code === 200) {
								this.info.url = uploadRes.data[0]?.url;
								useGetUserInfo()
							}
							this.$toast(res.msg)
						}).catch(err => {
							console.log("editerr: ", err);
						})
					}
				})
			},
			update(config) {
				this.modalConfig.source = config.getRadios && config.getRadios();
				this.modalConfig.title = `请填写真实${config.title},用于事件上报联系人使用`;
				this.modalConfig.domType = config.domType;
				this.modalConfig.val = this.info[config.attr]
				this.modalConfig.valText = SexEnum[this.info[config.attr]]
				this.modalConfig.formConfig = config;
				this.modalConfig.show = true
			},
			confirm() {
				let me = this;
				const config = me.modalConfig.formConfig;
				const value = me.modalConfig.val;
				const val = config.validator(value)
				if (!val) {
					uni.showModal({
						showCancel: true,
						title: `确认修改?`,
						success(e) {
							if (e.confirm) {
							    const params = {
                                    userId: me.info.userId,
                                    [config.attr]: value
                                }
                                if(config.attr == 'userNumberId'){
                                    params[config.attr] = JSEncryptUtils.encrypt(value)
								}else{
                                    params[config.attr] = value
								}
								editUserInfo(params).then(res => {
									if (res.code === 200) {
										me.info[config.attr] = value
										useGetUserInfo()
										me.cancel();
									}
									me.$toast(res.msg)
								})
							}
						}
					})
				} else me.$toast(val)
			},
			cancel() {
				this.modalConfig.show = false;
				this.modalConfig.val = null;
				this.modalConfig.formConfig = null;
			},
			changePassword() {
				let me = this;
				const phone = me.info?.phonenumber;
				if (uni.$u.test.mobile(phone)) {
					uni.showModal({
						title: `发送验证码到手机${phone}`,
						success(modalRes) {
							if (modalRes.confirm) {
								useSendCode({
									phone: phone,
									flag: VerCodeTypeEnum["忘记密码"]
								})
							}
						}
					})
				} else this.$toast("手机号不正确")
			},
			toMessage() {
				this.$jump("/pages/message/message")
			},
			logout() {
				this.$loadToast("退出中...")
				setTimeout(() => {
					uni.hideLoading()
					useLogout()
					uni.reLaunch({
						url: "/pages/login/login"
					})
				}, 2000)
			}
		}
	};
</script>

<style lang="less" scoped>
	@import url("@/pages/login/css/login.css");

	.btn {
		position: fixed;
		bottom: 100rpx;
		width: 100%;
		display: flex;
		justify-content: center;

		.logout-btn {
			width: 60%;
		}
	}


	.my-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;

		.row-label {
			font-weight: 700;
		}

		.row-content {
			display: flex;
			justify-content: flex-end;
		}
	}

	.my-row:not(:last-child) {
		border-bottom: 1px solid #f0f0f0;
	}
</style>